<template>
	<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''">
		<view class="mask-content">
			<view class="mask-content-topbar">
				<view class="left" @click="toggleMask">{{$t('comment.cancel')}}</view>
				<view class="right" @click="pubComment">{{$t('comment.release')}}</view>
			</view>
			<view class="mask-content-input">
				<textarea class="textarea" v-model="content" :placeholder="placeholder" :cursor-spacing="100"
					:show-confirm-bar="false" :focus="focus" maxlength="500"></textarea>
				<view class="rate">
					<u-rate :count="count" v-model="value"></u-rate>
				</view>
			</view>
	
			<view class="protocol">
				<view class="">
					<u-checkbox-group @change="checkboxChange"> 
						<u-checkbox v-model="checked" shape="square"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					{{ $t('comment.deal') }}
					<text style="color: #ff7c00"
						v-on:click.stop="goTerms('applet_agreement_addcomment')">{{ $t('comment.clause') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ygcComment",
		//属性
		props: {
			placeholder: {
				type: String
			},
			type: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				maskState: 0,
				content: '',
				focus: false,
				checked: false,
				count: 5,
				value: 0
			};
		},
		created() {},
		methods: {
			ratechange(e){
				console.log(e)
			},
			goTerms(map) {
				uni.navigateTo({
					url: '/pages/Agreement/Agreement?map=' + map
				})
			},
			checkboxChange(n) {
				this.checked = !this.checked
			},
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				// this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
					// #ifdef APP-PLUS
					// 安卓app软键盘自动弹出有点问题，暂时还没有很好的解决方案，所以就禁止安卓app软键盘自动弹出，如果哪位朋友有好的解决方案可以在评论里告诉大家参考一下
					if (uni.getSystemInfoSync().platform == "ios") {
						this.focus = this.maskState ? true : false;
					}
					// #endif
					// #ifndef APP-PLUS
					this.focus = this.maskState ? true : false;
					// #endif
				}, timer)
			},
			pubComment() {
				if (this.checked == false) {
					uni.showToast({
						title: this.$t('comment.massage'),
						icon: 'none'
					})
					return
				}
				if (this.content == '') {
					uni.showToast({
						title: this.$t('comment.mass1'),
						icon: 'none'
					})
					return
				}

				this.$emit('pubComment', this.content);
			}
		}
	}
</script>

<style lang="scss" scoped>
	$font-color-base: #606266;
	$base-color: #5A9BEC;

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;
		-webkit-transition: .3s;

		.rate {
			margin-left: 20rpx;
			padding: 20rpx 0;
			z-index: 9999999999999999999;
			position: absolute;
			bottom: 20rpx;
			right: 30rpx;
		}

		.mask-content {
			width: 100%;
			background: #FFFFFF;
			transform: translateY(100%);
			transition: .3s; //底部弹出的持续时间
			-webkit-transition: .3s; //底部弹出的持续时间 
			// overflow-y:scroll;
			display: flex;
			flex-direction: column;

			.mask-content-topbar {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20upx 30upx 10upx;
				font-size: 32upx;

				.left {
					padding: 10upx 0upx;
					color: $font-color-base;
				}

				.right {
					padding: 10upx 100upx;
					border-radius: 6upx;
					color: #FFFFFF;
					font-weight: 500;
					background-color: $base-color;
				}
			}

			.mask-content-input {
				width: 718upx; //如果textarea的宽带有问题可以把width改为100%试试
				// width: 100%;
				padding: 10upx 16upx 20upx;
				position: relative;
				.textarea {
					height: 100px;
					width: 686upx; //如果textarea的宽带有问题可以把width改为100%试试
					// width: 100%;
					padding: 16upx;
					border: 2upx solid #d5d5d6;
					border-radius: 8upx;
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	.protocol {
		width: 89.3%;
		display: flex;
		color: #000;
		margin: 0 auto;
		font-size: 24rpx;
		margin-top: 20rpx;
		padding-bottom: 88rpx;
	}
</style>
